<template>
  <div class="big-data box-sizing" @click.stop="close">
    <mu-container>
      <mu-drawer :open.sync="open" :right="position === 'right'">
        <mu-list>
          <mu-list-item>
            <mu-list-item-title>
              <router-link :to="{path:'/home/bigData'}">党员统计</router-link>
            </mu-list-item-title>
          </mu-list-item>
          <mu-list-item>
            <mu-list-item-title>
              <router-link :to="{path:'/home/bigData/studyTime'}">学习时长统计</router-link>
            </mu-list-item-title>
          </mu-list-item>
          <mu-list-item>
            <mu-list-item-title>
              <router-link :to="{path:'/home/bigData/orignationLife'}">组织生活</router-link>
            </mu-list-item-title>
          </mu-list-item>
          <mu-list-item>
            <mu-list-item-title>
              <router-link :to="{path:'/home/bigData/feeCount'}">党费统计</router-link>
            </mu-list-item-title>
          </mu-list-item>
          <mu-list-item>
            <mu-list-item-title>
              <router-link :to="{path:'/home/bigData/assessment'}">考核信息</router-link>
            </mu-list-item-title>
          </mu-list-item>
        </mu-list>
      </mu-drawer>
    </mu-container>
    <div class="big-container">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import Header from "@/views/home/components/header.vue";
export default {
  computed: {
    ...mapState({
      orgArray: state => state.initHomeData.orgArray
    }),
    open: {
      set(val) {
        this.$store.state.initHomeData.open = val;
      },
      get() {
        return this.$store.state.initHomeData.open;
      }
    }
  },
  data() {
    return {
      docked: false,
      position: "right",
      options: ["武汉纺友党支部"]
    };
  },

  methods: {
    ...mapMutations(["openHomeMenu", "getOrgArray"]),
    close() {
      if (this.open) {
        this.openHomeMenu({
          open: false
        });
      }
    },
    getOrgDate() {
      this.$http
        .get("/app/Registered/get_org", {
          org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id
        })
        .then(res => {
          console.log(res.data);
          if (res.code == "200") {
            console.log(res.data);
            if(res.data.length){
                this.getOrgArray({
                    orgArray: res.data
                });
            }
          }
          console.log(res);
        });
    }
  },
  mounted() {
    if (!Cookies.get("user_71ydj")) {
      this.$router.push({
        path: "/mine"
      });
      return false;
    }
    console.log(this.$store.state.initHomeData.open);
    console.log(this.orgArray)
    this.open = false;
    if (!this.orgArray.length) {
      this.getOrgDate();
    }
    //            console.log(this.orgArray)
  },
  created() {
    this.open = false;
  }
  //        watch:{
  //            $route(to,from){
  //                console.log(to);
  //                this.openHomeMenu({
  //                    open:true
  //                })
  //            }
  //        },
};
</script>

<style lang="scss" scoped="">
@import "../base2";
.big-data {
  background: #183377;
  padding: 0 16px;
  .container {
    .mu-paper /deep/ {
      width: 240px;
      background: #183377;
      z-index: 9999;
      .mu-list /deep/ {
        li:nth-child(1) {
          margin-top: 37px;
        }
        li {
        }
      }
      .mu-item-wrapper {
        .mu-item {
          height: 50px;
          line-height: 50px;
          padding: 0;
          .mu-item-title {
            font-size: 18px;
            height: 100%;
            width: 100%;
            a {
              display: block;
              color: white;
              height: 100%;
              padding-left: 40px;
              line-height: 50px;
              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
              &.router-link-exact-active {
                background: #1694c8;
              }
            }
          }
        }
      }
    }
  }

  .big-container /deep/ {
    .mu-input {
      .mu-select-content {
        color: white;
        text-align: center;
      }
    }
  }
}
</style>